【原创】码路工人 Coder-Power
大家好,这里是码路工人有力量,我是码路工人,你们是力量。
Generator function 生成器函数
是ES6
中新增的语法糖,本质上讲,就是以封装成一个遍历器的形式,让编码的你获得程序的执行控制权,通俗地说就是,流程控制上,踹一脚,走一步,不要太暴力~
0.前言
要说到生成器函数,就不得不提到javascript
的异步编程方式演进史。
(不能跑题不能跑题不能跑题)
- 1.普通的回调函数方式(callback)
- 2.事件/发布–订阅者模式(event/publisher–observer)
- 3.Promise
- 4.Generator
- 5.async/await(在ES8/ES2017中正式提出)
其中Promise
是一个里程碑,解决了回调函数嵌套时的callback hell
回调地狱问题(层级嵌套太多难以阅读与维护)。
而本文主角Generator
更像是作为一个过渡语法,在推出async/await
后就基本很少用了。
async/await
,CSharper转前端,一看就像见到亲人,C#
中有同样的语法。(#注:C# 5.0 中加入的)
话说语法演化地真是方便啊。在后面的文章中将单独给Promise
和async/await
开贴。
1.一句话介绍你自己
1.1 Talk is cheep, show you the CODE!
1 | /* eg.0 |
1.2 关于生成器函数的定义
第一,函数定义处有个
*
符号。*
既可以紧跟在function
后面,也可以贴在函数名前。第二,函数内有
yield
关键字用以中断处理流程,并可以临时对外提供一个返回值。
其它,写法上与普通函数无异
1.3 关于生成器函数的使用
1.像普通函数一样调用,得到的不是任何具体的返回值,而是一个迭代器。(也可以看作是一个状态机)
2.来一脚试试。通过调用得到的迭代器对象上的
next()
方法,开始得到第一个返回值对象。3.一直踹。每一次调用
next()
方法,得到一个结果对象,可以看到上面代码注释中的打印信息。其中
value
即当前获得的值,done
即迭代状态,它只有ture/false
两种可能,当它变为true
,即迭代完成。
2.主流使用方式
正常的使用方式也即良好的实践吧,应该是配合promise
来使用的。
来一个简陋的示例:
1 | /* eg.1 |
这样,就将异步的ajax
处理简单地以同步的样子书写出来了。
3.粗陋的实践
除了可以处理异步,码路工人个人觉得,Generator
比较适合用在循环处理的场景。其中就实践过类似下面这个处理的例子:
1 | /* eg.2 (part1) |
然后就是使用了,在循环取值的过程中,会有一些业务处理(同步的或异步的)。
1 | /* eg.2 (part2) |
打印信息结果:
1 | { value: 2019-06-06T00:00:00.000Z, done: false } |
上面的例子中,还是同步的方式。也许不是好的用法,但它能告诉你这是一种用法。
4.听说过的实践
这个码工没有实践过,大意是,Generator
函数这个语法糖是按照yield
将代码分成多个部分,人手工控制执行每一部分,于是,封装一个执行器函数,简化流程控制,使异步编程轻松愉快。
其实,在有了async/await
后真的没有这个必要了。
(co.js
就是一个这种Generator
的执行库)
4.其它
除了上面介绍的生成器函数的主要用法,其实还有点其它小特性,码路工人并没有实践过,感觉也不怎么会用到,这里稍作了解即可。
4.1 可以接收由next
传递进的参数。
1 | /* eg.3 |
关于给yield
传参确实看起来稍微有一点诡异,其实理解了也就不觉得奇怪了。
说明已贴在上面的注释中。
4.2 可以有默认的迭代器
1 | /* eg.4 |
4.3 因为可迭代,所以可以用展开运算符
1 | console.log(...gen) |
总结
关于生成器函数Generator Function
就介绍到这里吧,
这要知道有这个语法糖就可以了,反正以后还真不一定用得到
异步处理主要用到的还是Promise
跟async/await
。
以上。
希望对你能有帮助,下期再见。